<template>
  <!-- 表格数据-->
  <!-- 行的单选 根据传的disabled判断是否允许单选-->
  <el-table :data="tableData"
            class="tb-edit"
            border
            stripe
            :height="height"
            :row-class-name="tableRowClassName"
            :highlight-current-row="!disabled"
            @row-click="handleCurrentChange">
    <el-table-column
      v-if="showIndex"
      type="index"
      width="50">
    </el-table-column>
    <!--    tableHeader 列-->
    <el-table-column
      v-for="(item,index) in tableHeader"
      :key="index"
      :prop="item.name"
      :headerAlign="'center'"
      :align="item.align"
      :label="item.title"
      :fixed="item.fixed"
      :width="item.width"
      show-overflow-tooltip>
      <!--      根据不同类型显示不同的输入框 可以是下拉选择 /按钮 /输入框 还可以自己定义更多-->
      <template slot-scope="scope" :class="scope.row.hasError?'error-row':''">
        <el-select v-if="item.type === 'select'" size="small" v-model="scope.row[item.name]"
                   @change="handleEdit(scope.$index, scope.row)"
                   placeholder="请选择内容"
                   value="">
          <el-option
            v-for="option in item.data"
            :disabled="disabled"
            :value="option.name"
            :key="option.name"
            :label="option.name"/>
        </el-select>
        <el-button v-else-if="item.type === 'btn'" :disabled="disabled" @click="onSelected(scope.$index,scope.row)"
                   type="primary" size="small">
          {{ item.text }}
        </el-button>
        <el-date-picker
          v-else-if="item.type==='date'" :disabled="item.disabled || disabled"
          v-model="scope.row[item.name]"
          type="date"
          size="small"
          @change="handleEdit(scope.$index,scope.row)"
          placeholder="选择日期">
        </el-date-picker>
        <el-input v-else-if="item.type==='number'" size="small" :disabled="item.disabled || disabled"
                  v-model="scope.row[item.name]"
                  placeholder="请输入数字"
                  type="number"
                  :step="item.step"
                  @change="handleEdit(scope.$index, scope.row)"/>
        <el-input v-else size="small" :disabled="item.disabled || disabled" v-model="scope.row[item.name]"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"/>
        <span>{{ scope.row[item.name] }}</span>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
export default {
  name: "EditTable",
  props: {
    "tableData": Array,
    "showIndex": {      //是否显示首列 index
      type: Boolean,
      default: true
    },
    "tableHeader": Array,
    "height": Number,
    "stripe": {             //是否为斑马纹table
      type: Boolean,
      default: true
    },
    "disabled": Boolean
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      // if (row.hasError || (row.error !== undefined && row.error !== null && row.error !== '')) {
      //   return 'error-row';
      // }
      if (rowIndex === 1) {
        return 'error-row';
      }
      return '';
    },
    handleCurrentChange(row, event, column) {
      //console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$emit("handleEdit", {index: index, row: row})
    },
    onSelected: function (index, row) {
      console.log(row);
      this.$emit("onTableBtn", {index: index, row: row})
    }
  }
}
</script>
<style>
.el-table .error-row {
  background: red;
}

</style>
<style scoped>

/*当表格选中的时候 会自动添加  .current-row  这些代码很好理解了*/

.tb-edit .el-input, .tb-edit .el-select {
  display: none
}

.tb-edit .current-row .el-input, .tb-edit .current-row .el-select {
  display: block
}

.tb-edit .current-row .el-input + span, .tb-edit .current-row .el-select + span {
  display: none
}
</style>
